#include("/_function/layout/default.vue")
#@layout(i18n['title'])
#define jsCustom()
<template type="text/x-template" id="tpl-center-content">
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <a href="#(CONTEXT_PATH)/system/admin-menu/add" class="btn btn-primary"><i class="fa fa-plus"></i></a>
                </div>
                <h1>后台菜单</h1>
                <ul class="breadcrumb">
                    <li><a href="#(CONTEXT_PATH)/common/dashboard">首页</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-list"></i> #(i18n['text_list'])</h3>
                </div>
                <div class="panel-body">
                    <data-table url="#(CONTEXT_PATH)/api/system/admin-menu/datatable"
                                :columns="datatable.columns"
                                :draw="datatable.draw"
                                :searching="true"
                                :auto-width="false"
                                :search="datatable.search">
                        <template v-slot> <!-- 定义模板 -->
                            <script type="text/x-template" id="tpl-tb-status">
                                <span v-if="v === 1" class='label label-info'>#(i18n['text_enabled'])</span>
                                <span v-else-if="v === 0" class='label label-warning'>#(i18n['text_disabled'])</span>
                                <span v-else class='label label-danger'>#(i18n['text_unknown'])</span>
                            </script>
                            <script type="text/x-template" id="tpl-tb-action">
                                <div class="btn-group">
                                    <a :href="'#(CONTEXT_PATH)/system/admin-menu/edit/'+data.adminMenuId"
                                       data-toggle="tooltip"
                                       title="#(i18n['button_edit'])"
                                       class="btn btn-primary"><i class="fa fa-pencil"></i>
                                    </a>
                                    <button :data-row="data"
                                            onclick=" window.ccVue.delete($(this).data('row'))"
                                            type="button"
                                            data-toggle="tooltip"
                                            title="#(i18n['button_delete'])"
                                            class="btn btn-danger"><i class="fa fa-trash-o"></i>
                                    </button>
                                </div>
                            </script>
                        </template>
                    </data-table>
                </div>
            </div>
        </div>
    </div>
</template>
#include("/_function/component/datatable.vue")
<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('center-content', {
        created: function () {
            window.ccVue = this
        },
        template: document.getElementById('tpl-center-content'),
        data: function () {
            return {
                datatable: {
                    draw: 1,
                    columns: [
                        {
                            title: '名称',
                            data: 'descriptions',
                            render: (v) => {
                                return (v['#(i18n.getTag())'] || {}).name
                            }
                        },
                        {title: '更新时间', data: 'dateModified'},
                        {
                            title: '状态',
                            data: 'status',
                            render: (v) => {
                                return new Vue(
                                    {
                                        template: document.getElementById("tpl-tb-status"),
                                        data: function () {
                                            return {v: v}
                                        }
                                    }
                                ).$mount().$el.outerHTML;
                            }
                        },
                        {
                            title: "操作",
                            width: "12%",
                            render: (s, d, row) => {
                                return new Vue(
                                    {
                                        template: document.getElementById("tpl-tb-action"),
                                        data: function () {
                                            return {
                                                data: row
                                            }
                                        }
                                    }
                                ).$mount().$el.outerHTML;
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            openDelete: function (row) {
                let self = this
                layer.confirm("确定删除么?", function (index) {
                    var i = layer.load(2)
                    gateway.post('api/system/localisation/location/delete', {
                        languageId: row['languageId']
                    }).then((response) => {
                        var data = response.data;
                        layer.alert(data.message, {icon: 1})
                    }).finally(() => {
                        self.datatable.draw = self.datatable.draw + 1
                        layer.close(i)
                        layer.close(index)
                    })
                });
            }
        }
    })
})
</script>
#end